<template>
    <div id="fixationPeriod">
        <div class="contenter">
            <el-form
                :model="ruleForm"
                :rules="rules"
                ref="ruleForm"
                label-width="110px"
                class="ruleForm"
            >
                <el-form-item label="间隔周期" prop="jiange">
                    <el-col :span="5">
                        <el-form-item prop="documentName">
                            <el-select
                                v-model="ruleForm.jiange"
                                placeholder="请选择"
                                class="period"
                                @change="periodChange"
                            >
                                <el-option label="天" value="1"></el-option>
                                <el-option label="时" value="2"></el-option>
                                <el-option label="分" value="3"></el-option>
                                <el-option label="秒" value="4"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5" style="width:250px">
                        <el-form-item
                            label="每"
                            prop="mei"
                            class="each"
                            v-if="date"
                        >
                            <el-input-number
                                v-model="ruleForm.mei"
                                :disabled="isDisabled"
                                :min="0"
                                :max="30"
                                @change="eachChange"
                            ></el-input-number>
                        </el-form-item>
                        <el-form-item
                            label="每"
                            prop="mei"
                            class="each"
                            v-if="time"
                        >
                            <el-input-number
                                v-model="ruleForm.mei"
                                :disabled="isDisabled"
                                :min="0"
                                :max="23"
                                @change="eachChange"
                            ></el-input-number>
                        </el-form-item>
                        <el-form-item
                            label="每"
                            prop="mei"
                            class="each"
                            v-if="min"
                        >
                            <el-input-number
                                v-model="ruleForm.mei"
                                :disabled="isDisabled"
                                :min="0"
                                :max="59"
                                @change="eachChange"
                            >
                            </el-input-number>
                        </el-form-item>
                        <el-form-item
                            label="每"
                            prop="mei"
                            class="each"
                            v-if="second"
                        >
                            <el-input-number
                                v-model="ruleForm.mei"
                                :disabled="isDisabled"
                                :min="0"
                                :max="59"
                                @change="eachChange"
                            >
                            </el-input-number>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item>
                            <span>{{ periodText }}</span>
                        </el-form-item>
                    </el-col>
                </el-form-item>
                <el-form-item label="Cron表达式" prop="cronExpression">
                    <el-input
                        v-model="ruleForm.cronExpression"
                        disabled
                    ></el-input>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script>
export default {
    name: 'fixationPeriod',
    props: {
        reset: ''
    },
    data () {
        return {
            ruleForm: {
                jiange: '',
                mei: '',
                cronExpression: ''
            },
            rules: {},
            isDisabled: true,
            periodText: '', //  周期text
            periodType: '', //  周期类型
            date: true,
            time: false,
            min: false,
            second: false
        };
    },
    methods: {
    // 间隔周期的变化
        periodChange (value) {
            this.periodType = value;
            this.isDisabled = false;
            this.ruleForm.cronExpression = '';
            this.ruleForm.mei = '';
            switch (value) {
            case '1':
                this.periodText = '天执行一次';
                this.date = true;
                this.time = false;
                this.min = false;
                this.second = false;
                break;
            case '2':
                this.periodText = '小时执行一次';
                this.time = true;
                this.date = false;
                this.min = false;
                this.second = false;
                break;
            case '3':
                this.periodText = '分钟执行一次';
                this.time = false;
                this.min = true;
                this.date = false;
                this.second = false;
                break;
            case '4':
                this.periodText = '秒执行一次';
                this.time = false;
                this.min = false;
                this.date = false;
                this.second = true;
                break;
            }
        },
        // 输入的数字变化
        eachChange (value) {
            let val = value;
            switch (this.periodType) {
            case '1':
                if (value <= 0 || value > 30) {
                    this.$message.warning('请输入1-30之间的数字');
                    return;
                }
                this.ruleForm.cronExpression = `0 0 0 1/${val} * ? *`;
                break;
            case '2':
                if (value <= 0 || value > 23) {
                    this.$message.warning('请输入1-23之间的数字');
                    return;
                }
                this.ruleForm.cronExpression = `0 0 0/${val} * * ? *`;
                break;
            case '3':
                if (value <= 0 || value > 59) {
                    this.$message.warning('请输入1-59之间的数字');
                    return;
                }
                this.ruleForm.cronExpression = `0 0/${val} * * * ? *`;
                break;
            case '4':
                if (value <= 0 || value > 59) {
                    this.$message.warning('请输入1-59之间的数字');
                    return;
                }
                this.ruleForm.cronExpression = `0/${val} * * * * ? *`;
                break;
            }
            this.$emit('cron', this.ruleForm.cronExpression);
        }
    }
};
</script>
<style lang="scss" scoped>
.ruleForm {
    margin-left: 40px;
}

.ruleForm .table_title {
    border: 1px solid #eee;
    border-bottom: none;
    height: 53px;
    background-color: #ccc;
}

.ruleForm .table_title .pull_right {
    margin-top: 13px;
    margin-right: 20px;
}

.save_btn {
    margin-right: 200px;
}

/*规则列表弹框*/
.ruleTable {
    display: flex;
}

.ruleTable .left {
    flex-basis: 200px;
    margin-right: 16px;
    border: 1px solid #ccc;
    padding: 10px;
    background-color: #fff;
    height: 450px;
}

.ruleTable .left .el-tree {
    overflow: hidden;
    height: 420px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ruleTable .right {
    flex: 1;
}

.ruleTable .right .table {
    background-color: #fff;
    border: 1px solid #ccc;
}

.ruleTableCancel {
    margin-right: 100px;
}

/*频率弹框*/
</style>
